<template>
  <div style="display: flex; justify-content: space-around">
    <el-form
      :model="addInfo"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="服务名称" prop="serviceZhname">
        <el-input
          v-model="addInfo.serviceZhname"
          placeholder="请填外部服务名称"
          clearable
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <!--      <el-form-item label="中文名称" prop="serviceZhname">-->
      <!--        <el-input-->
      <!--          v-model="addInfo.serviceZhname"-->
      <!--          placeholder="请填写外部服务中文名称"-->
      <!--          clearable-->
      <!--          style="width: 500px"-->
      <!--        ></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="服务标识" prop="serviceName">
        <el-input
          v-model="addInfo.serviceName"
          placeholder="请填写服务标识"
          clearable
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务描述" prop="serviceDescription">
        <el-input
          type="textarea"
          v-model="addInfo.serviceDescription"
          style="width: 500px"
          clearable
          placeholder="请填写外部服务描述信息，用于描述外部服务功能"
        ></el-input>
      </el-form-item>
      <el-form-item label="外部服务IP" prop="serviceIp">
        <el-input
          v-model="addInfo.serviceIp"
          style="width: 500px"
          clearable
          placeholder="请填写外部服务IP"
        ></el-input>
      </el-form-item>
      <el-form-item label="端口信息" prop="servicePorts">
        <template slot-scope="scope">
          <!--          <el-select-->
          <!--            v-model="servicePort.portType"-->
          <!--            slot="prepend"-->
          <!--            placeholder="端口类型"-->
          <!--            style="width: 100px"-->
          <!--          >-->
          <!--            <el-option label="http" value="http"></el-option>-->
          <!--            <el-option label="tcp" value="tcp"></el-option>-->
          <!--            <el-option label="udp" value="udp"></el-option>-->
          <!--            <el-option label="http2" value="http2"></el-option>-->
          <!--            <el-option label="websocket" value="websocket"></el-option>-->
          <!--            <el-option label="grpc" value="grpc"></el-option>-->
          <!--          </el-select>-->
          <!--          <el-input-->
          <!--            placeholder="端口号"-->
          <!--            v-model="servicePort.port"-->
          <!--            style="width: 120px"-->
          <!--            controls-position="right"-->
          <!--            type="number"-->
          <!--          >-->
          <!--          </el-input>-->
          <el-input
            type="number"
            placeholder="端口号"
            v-model="servicePort.port"
            style="width: 200px"
            :min="1"
          >
            <el-select
              v-model="servicePort.portType"
              slot="prepend"
              placeholder="端口类型"
              style="width: 100px"
            >
              <el-option label="http" value="http"></el-option>
              <el-option label="tcp" value="tcp"></el-option>
              <el-option label="udp" value="udp"></el-option>
              <el-option label="http2" value="http2"></el-option>
              <el-option label="websocket" value="websocket"></el-option>
              <el-option label="grpc" value="grpc"></el-option>
            </el-select>
          </el-input>
          <el-input
            v-model="servicePort.portDescription"
            style="width: 130px; margin-left: 10px"
            clearable
            placeholder="端口描述"
          ></el-input>
          <el-checkbox v-model="servicePort.mainPort" style="margin-left: 10px">
            主端口
          </el-checkbox>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 15px"
            @click="addPortsInfo"
            class="el-button-primary-style"
          >
            添加
          </el-button>
        </template>
      </el-form-item>

      <el-form-item>
        <el-table
          :data="addInfo.servicePorts"
          style="width: 100%"
          v-show="addInfo.servicePorts.length > 0"
          :show-header="false"
          :row-style="{ height: '0.5rem' }"
          :cell-style="{ padding: '0' }"
          height="6rem"
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="portType"></el-table-column>
          <el-table-column prop="port"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div class="descSpan">
                {{ scope.row.portDescription }}
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              {{ scope.row.mainPort ? "主端口" : "非主端口" }}
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="deletePort(scope.$index)"
                style="color: #f56c6c"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <div style="float: right">
          <el-button
            type="primary"
            size="small"
            @click="addOutService"
            class="el-button-primary-style"
          >确定
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="beforeCloseDialog"
            class="el-button-primary-style"
          >取消
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "AddOutServiceDialog",
    props: {
      parentFunction: {
        type: Function,
        required: true,
      },
    },
    data() {
      return {
        addInfo: {
          serviceName: "",
          serviceZhname: "",
          // serviceInterface: "",
          serviceDescription: "",
          serviceIp: "",
          servicePorts: [],
        },
        servicePort: {
          portType: "",
          port: null,
          portDescription: "",
          mainPort: false,
        },
        rules: {
          serviceZhname: [
            {
              required: true,
              message: "请填写外部服务名称",
              trigger: ["blur", "change"],
            },
            // {
            //   pattern: /^[A-Za-z]+$/, // 匹配大小写英文字母
            //   message: "只能包含英文大小写字母",
            //   trigger: ["blur", "change"],
            // },
            {
              min: 1,
              max: 64,
              message: "长度在 1 到 64 之间",
              trigger: "blur",
            },
          ],
          serviceName: [
            {
              required: true,
              message: "请填写服务标识",
              trigger: ["blur", "change"],
            },
            // {
            //   pattern: /^S\d+(\.\w{1,24}){1}\.[A-Z]{2}$/,
            //   message: "请输入有效的服务标识，格式为S1.xxxx.JW",
            //   trigger: ["blur", "change"],
            // },
          ],
          serviceDescription: [
            {
              min: 1,
              max: 1024,
              message: "长度在 1 到 1024 之间",
              trigger: "blur",
            },
          ],
          serviceIp: [
            {
              required: true,
              message: "请填写服务IP，系统中保持唯一",
              trigger: "blur",
            },
            {
              pattern:
                /^(?:(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
              message: "请输入有效的IP地址",
              trigger: ["blur", "change"],
            },
          ],
        },
      };
    },
    methods: {
      addOutService() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // const serviceInterfacePattern = this.rules.serviceInterface.find(
            //   (rule) => rule.pattern
            // );
            // if (
            //   !serviceInterfacePattern ||
            //   !serviceInterfacePattern.pattern.test(this.addInfo.serviceInterface)
            // ) {
            //   this.$message.error("服务标识不正确");
            //   return;
            // }
            this.$appStoreApi.addOutService(this.addInfo).then((res) => {
              if (res && res.code === 200) {
                this.resetForm();
                this.beforeCloseDialog();
                this.$message.success(res.data);
              }
            });
          } else {
            this.$message.warning("数据存在问题，请检查");
            return false;
          }
        });
      },
      // 添加一条端口信息
      addPortsInfo() {
        if (this.servicePort.portType === "") {
          this.$message.error("请选择端口类型");
          return;
        }
        if (this.servicePort.port === null) {
          this.$message.error("请输入端口");
          return;
        }
        if (this.servicePort.port > 65535 || this.servicePort.port < 1) {
          this.$message.error("端口在1-65535之间");
          return;
        }
        if (this.servicePort.portDescription === "") {
          this.servicePort.portDescription = "暂无描述";
          // return;
        }
        let filter = this.addInfo.servicePorts.filter(ele => ele.port === this.servicePort.port);
        if (filter.length > 0) {
          this.$message.error("端口重复");
          return;
        }
        this.addInfo.servicePorts.push(this.servicePort);
        // 清空输入框和单选框的值
        this.servicePort = {
          portType: "",
          port: null,
          portDescription: "",
          mainPort: false,
        };
      },
      deletePort(index) {
        this.addInfo.servicePorts.splice(index, 1);
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
      beforeCloseDialog() {
        this.$emit("beforeCloseAddOutServiceDialog", null);
      },
    },
  };
</script>

<style lang="css" scoped>
  /**::v-deep .el-input--suffix .el-input__inner {
      padding-right: 0;
      height: 32px;
    }*/

  ::v-deep .el-checkbox .el-checkbox__inner {
    border-radius: 50%;
  }
</style>
